.bg {
    &::before, &::after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-size: contain;
        background-repeat: no-repeat;
    }

    &::before {
        z-index: -2;
    }

    &::after {
        z-index: -1;
    }

    .container {
        z-index: 0;
    }

    &--blue {
        color: $white;
        background-color: $blue-500;

        &::before {
            background-color: $blue-500;
            background-image: url("../img/rect.png"), url("../img/bg-blue.png");
            background-repeat: no-repeat, repeat-y;
            background-size: contain, 100%;
            background-position: right bottom;
        }

        &.bg--no-rect::before {
            background-image: none, url("../img/bg-blue.png");
        }
    }
}